/** * @description : 查看周边零售户 * @descriptionDetail : 查看周边零售户 * @copyright : 浙江烟草 * @author : mc * @create : 2022-12-05
15:34:51 */
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="retailBack" style="z-index: 99999">
			<view class="nav-right-icon">
				<u-icon style="margin-left: 20rpx;" name="more-dot-fill" color="#FFF" @tap="selectOrg"></u-icon>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<u-popup v-model="orgShow" width="80%" mode="right">
			<view class="cearch_title">
				查询条件
			</view>
			<u-form :model="orgForm" label-position="top" label-width="auto" style="padding: 80rpx 32rpx 160rpx 32rpx"
				ref="uForm">
				<u-form-item label="负责人姓名:" prop="managerName">
					<u-input placeholder="请输入负责人姓名" v-model="orgForm.managerName" />
				</u-form-item>
				<u-form-item label="距离:" prop="distance">
					<u-input placeholder="请输入距离" v-model="orgForm.distance" />
				</u-form-item>
				<u-form-item label="许可证号:" prop="licNo">
					<u-input placeholder="请输入许可证号" v-model="orgForm.licNo" />
				</u-form-item>
				<u-form-item label="企业名称:" prop="companyName">
					<u-input placeholder="请输入企业名称" v-model="orgForm.companyName" />
				</u-form-item>
				<u-form-item label="经营地址:" prop="businessAddr">
					<u-input placeholder="请输入经营地址" v-model="orgForm.businessAddr" />
				</u-form-item>
				<u-form-item label="联系电话:" prop="retailTel">
					<u-input placeholder="请输入联系电话" v-model="orgForm.retailTel" />
				</u-form-item>
			</u-form>
			<view class="submit-btns btn-other-cls">
				<u-button plain class="del" type="primary" @click="close">
					重置
				</u-button>
				<u-button class="mit" type="primary" @click="selectChange">
					确定
				</u-button>
			</view>
		</u-popup>
		<!-- <u-popup :mask-close-able="false" v-model="detailShow" border-radius="20" mode="center" width="80%"
			height="200rpx">
			
			<view class="good-popup-lay">
				<view style="margin: 80rpx 0;text-align: center;">
					是否跳转到零售户档案详情？
				</view>
				<view style="text-align: center;margin-top:0.35rem">
					<u-button plain type="primary" size="medium" style="margin-right:1rem;"@click="() => { detailShow = false;}">
						否
					</u-button>
					<u-button type="primary" size="medium" @click="() => { $u.route('pages/retailer/retailerInfo/retailerInfo', {
						retailerUuid: detailData.retailerUuid,
					});detailShow = false;}">
						是
					</u-button>
				</view>
			</view>
		</u-popup> -->
		<view class="content" style="width: 100%">
			<!-- 地图展示 -->
			<view :style="{ width: getContainerWidth(), height: getContainerHeight() }" id="container"></view>
			<view>
				<div 
					:style="{ 'color': '#393B3D', 'height': '44px', 'text-align': 'center', 'line-height': '44px' }"
					@click="isHideList()">点击<span v-if="showList">隐藏</span><span v-if="!showList">显示</span>列表</div>
				<view :style="{ 'border-top': '1px solid #c1c1c1','min-height': '320px', 'height': '320px',
    'overflow': 'auto scroll','padding-bottom': '30px'}"
					v-show="showList" >
					
					<view v-for="(item,index) of archiveList" class="list-lay">
						<view class="lt-root" @tap="itemClick(item)">
							<view class="content-nt-lay">
								<view class="content-title-lay-special">
									<text class="content-title">
										{{ index + 1 }}. {{ item.companyName }} ({{ item.licNo }})
									</text>
								</view>
								<view class="content-title-lay">
									<text>{{ item.managerName }} {{ item.retailTel }}</text>
								</view>
								<view class="content-title-lay">
									<text>{{ item.businessAddr }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		AMapMixin,
	} from '@/common/AMapMixin.js';
	import certificateService from '@/service/certificate/certificate.service.js';
	import {
		SET_MAP_LAT_LON,
	} from '@/config/setting.config.js';
	import USearch from '../../../uview-ui/components/u-search/u-search.vue';
	import UIcon from '../../../uview-ui/components/u-icon/u-icon.vue';
	import meTable from '@/components/me-table.vue';
	import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
	import fabButton from '@/components/uni-fab.vue';
	import DicInput from "@/components/dic_input.vue";
	import DicChoice from "@/components/dic_choice.vue";

	export default {
		components: {
			UIcon,
			USearch,
			meTable,
			DicInput,
			DicChoice,
			fabButton
		},
		mixins: [AMapMixin, MescrollMoreMixin],
		data() {
			return {
				markers: [],
				currPosition: undefined,
				archiveList: [],
				northeastLatitude: '',
				northeastLongitude: '',
				southwestLatitude: '',
				southwestLongitude: '',
				cluster: undefined,
				searchPlac: '',
				judgmentId: 3,
				title: '',
				longitude: '',
				latitude: '',
				orgUuid: '',
				positionPicker: undefined,
				showList: false,
				showSearch: false,
				detailShow: false,
				detailData: {},

				searchKey: "",
				user: this.$storage.get(this.$rp.common.USER),
				orgShow: false,
				searchObj: {}, // 返回过来查询对象
				lab_style: {
					fontWeight: 500,
					color: this.$theme.u_main_color,
					fontSize: '.75rem',
				},
				iconStyle: {
					color: '#c0c4cc',
				},
				orgForm: {
					distance: '',
					licNo: '',
					companyName: '',
					managerName: '',
					businessAddr: '',
					retailTel: ''
				},
				dateRange: false,
				// dic_select 是否显示
				dicShow: false,
				// dic 关键字
				dicKeyWords: "",
				// dic 当前选择项
				dicCurrentSelect: "",
				dicType: "",
				// 输入框是否有border
				ifborder: false,
				expirationReminder: false,
				processStatus: false,
				licnDtae: false,
				fContent: [{
					iconPath: require('@/static/sou.png'),
					selectedIconPath: require('@/static/sou.png'),
					text: '筛选',
					active: false,
				}],
				// h5端部分浏览器input设置disabled后点击事件失效 2023-10-29 fsx start
				pointerStyle: {
					marginRight: "5px",
					pointerEvents: "none !important"
				},
				// h5端部分浏览器input设置disabled后点击事件失效 2023-10-29 fsx end
			};
		},
		onLoad(opt) {
			this.showDefaultTitle = false;
			this.judgmentId = opt.id;
			this.judgmentInit(opt);
			let self = this;
			if (this.$deviceApi.geolocation) {
				this.$deviceApi.geolocation().then((res) => {
					self.longitude = res.longitude;
					self.latitude = res.latitude;
					this.longitude = res.longitude;
					this.latitude = res.latitude;
				});
			} else {
				self.longitude = SET_MAP_LAT_LON[0];
				self.latitude = SET_MAP_LAT_LON[1];
				this.longitude = self.longitude;
				this.latitude = self.latitude;
				// self.longitude = 114.515663;
				// self.latitude = 38.019143;
			}
			this.setRightBtns();
		},
		mounted() {
			this.init();
			this.setRightBtns();
		},
		methods: {
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("筛选", () => {
					this.selectOrg();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.selectOrg();
				}
			},
			getSpStyle(it) {
				if (it.warnProcessStatus == PROCESS_STATUS.UNHANDLED) {
					return sysCodeColors[it.warnProcessStatus] || {};
				} else {
					return sysCodeColors[it.warnProcessStatus] || {};
				}
			},
			updateBackState(param) {
				this.getMescroll(0).triggerDownScroll();
			},
			selectOrg() {
				this.orgShow = true;
				// this.setRouteParam(this.searchObj);
			},
			selectChange() {
				if (Number(this.orgForm.distance) > 1000) {
					this.$u.toast('距离不能大于1000');
					return;
				}
				this.orgShow = false;
				this.searchObj = this.orgForm;
				if (Number(this.orgForm.distance) < 100) {
					this.amap.setZoom(20);
				} else if (Number(this.orgForm.distance) >= 100 && Number(this.orgForm.distance) <= 300) {
					this.amap.setZoom(16);
				} else if (Number(this.orgForm.distance) > 300 && Number(this.orgForm.distance) <= 500) {
					this.amap.setZoom(14);
				} else if (Number(this.orgForm.distance) > 500 && Number(this.orgForm.distance) <= 1000) {
					this.amap.setZoom(13);
				}
				this.getNearRetailer();
			},
			handlerLicnDtae(d) {
				this.orgForm.decideStartDate = d.startDate;
				this.orgForm.decideEndDate = d.endDate;
				this.orgForm.rangeDate = d.startDate + "至" + d.endDate;
				// this.$refs["mescrollItem0"].refresh();
			},
			dicSelectOpen(type, keyWords) {
				if (type == this.dicType) {
					if (this.dicKeyWords == keyWords && this.dicShow) {
						return true;
					}
					return false;
				}
			},
			showDic(key, cur, type) {
				if (this.dicShow) return;
				this.dicKeyWords = key;
				this.dicCurrentSelect = cur;
				this.dicShow = true;
				this.dicType = type;
			},
			unitConfirm(e) {
				this.orgForm.warnRemindName = e[0].label
				this.orgForm.warnRemind = e[0].value
				if (this.orgForm.warnRemind == '01') {
					this.orgForm.remindDaysName = "";
					this.orgForm.remindDays = "";
				}
			},
			statusConfirm(e) {
				this.orgForm.warnProcessStatusName = e[0].label
				this.orgForm.warnProcessStatus = e[0].value
			},
			close() {
				this.orgForm = {};
			},
			init() {
				this.$modal.showLoading('地图加载中...');
			},
			judgmentInit(opt) {
				this.title = '';
				switch (Number(opt.id)) {
					case 3:
						this.searchPlac = '可查询许可证号或企业字号';
						this.title = '零售户位置分布';
						break;
					default:
						break;
				}
				this.updateMixinTitle(this.title);
			},
			initAmap() {
				let self = this;
				// #ifdef H5-DINGDING || H5-WECHAT || H5-EMP
				this.$deviceApi.geolocation().then(
					(res) => {
						self.curPos = [res.longitude, res.latitude];
						self.setMapInstance([res.longitude, res.latitude]);
					},
					(err) => {
						self.curPos = SET_MAP_LAT_LON;
						self.setMapInstance(SET_MAP_LAT_LON);
					}
				);
				// #endif
				// #ifdef H5-ONLY
				this.getCurrentLocation().then(
					(res) => {
						self.curPos = [res.lng, res.lat, ];
						self.setMapInstance([res.lng, res.lat, ]);
					},
					(err) => {
						self.curPos = SET_MAP_LAT_LON;
						self.setMapInstance(SET_MAP_LAT_LON);
						// self.curPos = [114.515663, 38.019143];
						// self.setMapInstance([114.515663, 38.019143]);
					}
				);
				// #endif
			},
			setMapInstance(cords) {
				if (!this.hasInited) return;
				let self = this;
				self.curCords = new AMap.LngLat(cords[0], cords[1]);
				self.amap = new AMap.Map('container', {
					center: self.curCords,
					showControlButton: true,
					zoom: 18,
				});
				// self.amap.setZooms([13, 30,]);
				self.setCurrentPointMarker();
				this.$modal.hideLoading();
				self.loadPlugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', ], function() {
					// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
					self.amap.addControl(new AMap.ToolBar());
					// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
					self.amap.addControl(new AMap.Scale());
					// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
					let geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, // 是否使用高精度定位，默认:true
						timeout: 10000, // 超过10秒后停止定位，默认：5s
						// buttonPosition:'RB',    //定位按钮的停靠位置
						buttonOffset: new AMap.Pixel(5, 10), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
						// zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
						content: '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
					});
					self.amap.addControl(geolocation);
				});
				// 地图缩放
				self.amap.on('zoomend', function() {
					// self.getNearRetailer();
				});
				// 地图移动
				self.amap.on('moveend', function() {
					// self.getNearRetailer();
				});
				self.getNearRetailer();
			},
			// 获取列表数据
			getNearRetailer() {
				let bounds = this.amap.getBounds();
				let params;
				let self = this;
				let information = '';
				let errInfo = '';
				let fun = '';
				switch (Number(this.judgmentId)) {
					case 3:
						params = {
							longitude: self.longitude, // 西南
							latitude: self.latitude,
							distance: this.searchObj.distance ? this.searchObj.distance : 100,
							keyWord: '',
							retailerUuid: '',
							limit: '',
							page: '',
							licNo: this.searchObj.licNo,
							companyName: this.searchObj.companyName,
							managerName: this.searchObj.managerName,
							businessAddr: this.searchObj.businessAddr,
							retailTel: this.searchObj.retailTel,
						};
						information = '正在查询零售户位置...';
						errInfo = '该区域内没查询到零售户信息！';
						fun = certificateService.queryLicPositionInfo;
						break;
					default:
						break;
				}
				if (this.amap.getZoom() < 2) {
					this.markers = [];
					if (this.cluster) {
						this.amap.remove(this.cluster);
					}
					if (this.$storage.get('showMapZoomTip') != '1') {
						this.$modal.alert(
							'地图层级收缩，不支持查询，查询数据请将地图层级扩大。',
							'提示',
							() => {
								this.$storage.set('showMapZoomTip', '1');
							},
							'不再提示'
						);
					}
					return;
				}
				this.$modal.showLoading(information);
				fun(params)
					.then((res) => {
						this.$modal.hideLoading();
						if (res.success) {
							self.archiveList = res.data;
							this.caleaMakert()
							
							if (res.data.length != 0) {
								res.data.forEach((retailer, index) => {
									if (retailer.latitude && retailer.longitude) {
										this.addMarker(retailer, res.data, index);
										
									}
								});
								if (Number(this.judgmentId) != 3) {
									this.markerCluster();
								}
								resolve({
									count: res.count,
									data: [res.data, ],
								});
							} else {
								// this.amap.remove();
								resolve({
									count: 0,
									data: [],
								});
								this.$u.toast(errInfo);
							}
						} else {
							resolve({
								count: 0,
								data: [],
							});
							this.$modal.hideLoading();
							self.$u.toast(res.msg);
						}
					})
					.catch((error) => {
						self.$u.toast(error);
					});
			},
			// 在地图上添加点
			addMarker(retailer, retailerData, index) {
				let self = this;
				let img = '';
				if (this.judgmentId == 0) {
					img = 'static/certificate/retailAccount.png';
				} else if (this.judgmentId == 1) {
					img = 'static/certificate/unlicensedAccount.png';
				} else {
					img = 'static/certificate/store_red.png';
				}
				let markPoint = {
					title: this.judgmentId == 2 ? retailer.areaName : retailer.companyName, // 显示的零售户名称
					icon: new AMap.Icon({
						size: new AMap.Size(40, 40), // 图标尺寸
						image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', // 图标的URL
						imageSize: new AMap.Size(40, 40), // 图标所用图片尺寸
						anchor: 'bottom-center', // 图标定位偏移量
						// 这里可以修改image的CSS样式，实现红色水滴的效果
						style: 'background-color: red'
					}),
					label: null,
					offset: new AMap.Pixel(-10, -10),
					position: [retailer.longitude, retailer.latitude, ], // 所需要的零售户经纬度
				};

				markPoint.label = {
					content: index + 1,
					offset: new AMap.Pixel(index+1 >= 10 ? 12:15, 8),
					styles: {
						color: '#FFF', // 设置字体颜色
						fontSize: '12px' // 设置字体大小
						// 可以添加更多样式来自定义标签的显示效果
					}
				};

				let point = new AMap.Marker(markPoint);
				point.setMap(this.amap); // 在地图上添加点
				point.on('click', function() {
					self.showRetailer(retailer); // 点击调用详情
				});
				this.markers.push(point);
			},
			caleaMakert(){
				this.markers.forEach((item) => {
					this.amap.remove(item);
				});
			},
			
			// 查看零售户详情
			showRetailer(retailer) {
				switch (Number(this.judgmentId)) {
					case 3:
						// this.detailShow = true;
						this.detailData = retailer;
						this.$modal.confirm('是否跳转到零售户档案详情', "提示", () => {
							this.gotoDetail(retailer)
						}, () => {})

						break;
					default:
						break;
				}
			},
			toCurrent() {
				let self = this;
				this.getCurrentLocation().then(
					(res) => {
						self.curCords = new AMap.LngLat(res.lng, res.lat);
						self.curPos = [res.lng, res.lat, ];
						self.updateCurrentPointMarker();
					},
					(err) => {
						self.updateCurrentPointMarker();
					}
				);
			},
			getContainerHeight() {
				let p
				if (Number(this.judgmentId) == 3) {
					if (this.showList) {
						p = (this.$u.sys().windowHeight - 44 - this.$u.sys().statusBarHeight) * 0.6 + 'px';
					} else {
						p = this.$u.sys().windowHeight - 84 - this.$u.sys().statusBarHeight + 'px';
					}
				} else {
					p = this.$u.sys().windowHeight - 44 - this.$u.sys().statusBarHeight + 'px';
				}
				// #ifdef H5-WECHAT
				p = this.$u.sys().windowHeight - this.$u.sys().statusBarHeight + 'px';
				// #endif
				return p;
			},
			getContainerWidth() {
				return this.$u.sys().windowWidth + 'px';
			},
			justInitMap() {
				this.$modal.alert('请在设备的设置中开启APP的定位权限后重新获取当前位置');
				this.amap = new AMap.Map('container', {
					showControlButton: true,
					zoom: 18,
				});
				this.$modal.hideLoading();
			},
			
			getRetailerByCode(code) {
				certificateService
					.getRetailerListByLicenseCodes({
						licNoStr: code,
					})
					.then((rt) => {
						if (rt.success && rt.data.length > 0) {
							this.gotoDetail(rt.data[0]);
						} else {
							this.$u.toast(rt.msg);
						}
					})
					.catch((error) => {
						this.$u.toast(error);
					});
			},
			// 查看零售户详情
			gotoDetail(retailer) {
				this.$u.route('pages/retailer/retailerInfo/retailerInfo', {
					retailerUuid: retailer.retailerUuid,
				});
			},
			// 返回按钮
			retailBack() {
				this.$deviceApi.nfcStop && this.$deviceApi.nfcStop();
				let self = this;
				self.backPrev({
					paramKey: 'data',
					param: {},
				});
			},
			
			itemClick(item) {
				this.detailData = item;
				this.$u.route('pages/retailer/retailerInfo/retailerInfo', {
					retailerUuid: item.retailerUuid,
				});
			},
			isHideList() {
				if (this.showList) {
					this.showList = false;
				} else {
					this.showList = true;
				}
				this.getContainerHeight();
			},
			navigationClick(longitude, latitude, businessAddr) {
				if (!longitude || !latitude) {
					this.$u.toast("该零售户未采集坐标，无法导航");
					return;
				}
				// #ifdef H5-ONLY
				let parmas = {
					longitude: longitude,
					latitude: latitude,
					address: businessAddr,
				};
				this.setRouteParam(parmas);
				this.$u.route("/pages/commonPage/mapNavigatorComponent");
				// #endif

				// #ifndef H5-ONLY
				this.$deviceApi.navigateMap(this.info.latitude, this.info.longitude, this.info.businessAddr);
				// #endif
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		padding: 0;
	}

	@import 'style/certificate/common.scss';

	.nolicence-search-lay {
		position: fixed;
		// #ifndef H5-DINGDING
		top: 44px;
		// #endif
		// #ifdef H5-DINGDING
		top: 0px;
		// #endif
		z-index: 99;
		width: 100%;
		padding: $cm-search-padding-row 0;
	}

	.search-right-icon {
		display: flex;
		position: absolute;
		right: 8%;
	}

	uni-page-body {
		width: 100%;
		background-color: #f1f0f6;
		overflow: hidden;
	}

	#container {
		width: 100%;
		height: calc(100% - 88px);
	}

	

	.cur-loc {
		position: absolute;
		bottom: 30px;
		left: 10px;
		padding: 5px;
		background: #fff;
		width: 35px;
		height: 35px;
		box-shadow: 0px 0px 0px 1px #ddd;
	}

	.detail-title {
		height: 70px;
		text-align: center;
		padding: 20px;
		font-weight: 600;
		color: $u-main-color;
		border-bottom: 1px solid #c1c1c1;

		.detail-close {
			float: right;
			margin-top: 5px;
		}

		.detail-title-text {
			font-size: 33rpx;
		}

		span {
			font-size: 30rpx;
		}
	}

	.contetnt-border {
		padding: 15px !important;
	}

	.content {
		background-color: #F3F4F5;
	}

	.page {
		padding: 0;
	}

	.nolicence-search {
		padding: $cm-search-padding-row $cm-search-padding-column;
	}

	.lt-root {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		align-items: center;
		align-content: center;
	}

	.left-tag {
		padding: 4px 12px 0 2px
	}

	.content-nt-lay {
		flex: 1;
	}

	.content-title-lay {
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		align-items: center;
		padding: 10rpx 6rpx;
		word-break: break-all;
		flex: 1;
	}

	.content-title-lay-special {
		display: inline-flex;
		flex-direction: row;
		width: 100%;
		align-items: center;
		padding: 10rpx 6rpx;
		word-break: break-all;
		flex: 1;
	}

	.content-title {
		font-weight: 600;
		font-size: 30rpx;
		color: $u-main-color;
	}

	.content-sub-title-lay {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 6rpx;
		font-size: 26rpx;
		color: $cm-form-subtitle-color;
	}

	.content-sub-title {
		color: $cm-form-subtitle-color;
		font-size: $cm-form-item-label-font-size;
	}

	@import "style/store/common.scss";

	.page {
		padding: 0;
	}

	.list-content {
		background-color: #F3F4F5;
		min-height: 100%;
	}

	.list-item-root {
		margin: 10px;
		border-radius: 15px;
		overflow: hidden;
		background-color: #fff;
	}

	.cearch_title {
		background-color: #F3F4F5;
		width: 100%;
		height: 82rpx;
		font-size: 32rpx;
		font-weight: 600;
		padding: 22rpx 0 21rpx 32rpx;
		z-index: 999;
		position: fixed;
	}

	.title-content {
		width: 93%;
		margin: auto;
		padding-top: 76rpx;

		.query-btn {
			position: fixed;
			width: 95%;
			bottom: var(--window-bottom, 0);
		}
	}

	.content {
		background-color: #FFF;

		&-top {
			text-align: center;
			font-size: 30rpx;
		}

		.stickys {
			/* #ifdef H5-DINGDING  */
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 999;
			background-color: #FFFFFF;
			/* #endif */
			/* #ifndef H5-DINGDING  */
			position: fixed;
			top: 44px;
			width: 100%;
			z-index: 999;
			background-color: #FFFFFF;
			/* #endif */
		}
	}

	/deep/ .u-tabbar__content__item__text {
		font-size: 15px;
	}

	/deep/ .amap-marker-label {
		color: white;
	}

	/deep/ .mescroll-body {
		height: 260px;
		overflow: scroll;
	}

	.tabsBottom {
		margin-top: 73px;
	}

	.search-pop {
		width: 95%;
		margin: auto;

		.btn-group {
			display: flex;
			position: fixed;
			width: 95%;
			z-index: 999;
			bottom: var(--window-bottom, 0);
			padding-bottom: 10px;

			.btn {
				width: 100%;
			}
		}
	}

	.nav-right-icon {
		margin-right: 30rpx;
		font-size: 15 rpx;
		color: #fff;
	}


	.page {
		padding: 0;
	}

	.nolicence-search-lay {
		background-color: #fff;
		position: fixed;
		// #ifndef H5-DINGDING
		top: 44px;
		// #endif
		// #ifdef H5-DINGDING
		top: 0px;
		// #endif
		z-index: 999;
		width: 100%;
		overflow: hidden;
	}

	.nolicence-search {
		padding: $cm-search-padding-row $cm-search-padding-column;
	}

	.list-lay {
		border-bottom: 2rpx solid $u-border-color;
		padding: 20rpx 20rpx;
		background-color: #FFF;
		margin: 20rpx;
	}

	.lt-root {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		align-items: center;
		align-content: center;
	}

	.left-tag {
		padding: 4px 12px 0 2px
	}

	.content-nt-lay {
		flex: 1;
	}

	.content-title-lay {
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		align-items: center;
		padding: 10rpx 6rpx;
		word-break: break-all;
		flex: 1;
	}

	.content-title-lay-special {
		display: inline-flex;
		flex-direction: row;
		width: 100%;
		align-items: center;
		padding: 10rpx 6rpx;
		word-break: break-all;
		flex: 1;
	}

	.content-title {
		font-weight: 600;
		font-size: 30rpx;
		color: $u-main-color;
	}

	.content-sub-title-lay {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 6rpx;
		font-size: 26rpx;
		color: $cm-form-subtitle-color;
	}

	.content-sub-title {
		color: $cm-form-subtitle-color;
		font-size: $cm-form-item-label-font-size;
	}
</style>